<script setup>
import { getHotGoodsAPI } from "@/apis/detail";
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const hotGoods = ref([]);

const props = defineProps({
    hotType:{
        type: Number
    }
})
const TYPEMAP = {
    1: '24小时热榜',
    2: '周榜'
}
const title = computed(() => TYPEMAP[props.hotType])
const getHotGoods = async () => {
  const res = await getHotGoodsAPI({
    id: route.params.id,
    type: props.hotType,
  });
  hotGoods.value = res.result;
};
onMounted(() => getHotGoods());
</script>

<template>
  <div class="hotContainer" style="width: 100%; margin-top: 30px">
    <div
      class="hotText"
      style="
        width: 100%;
        background-color: #dc5732;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      "
    >
      <h3>{{ title }}</h3>
    </div>
    <div class="hotItemContainer" style="width: 100%; padding: 10px">
      <div
        class="hotItem"
        v-for="item in hotGoods"
        :key="item.id"
        style="width: 100%;padding: 20px;"
      >
        <img style="border: 1px solid black; width: 100%" :src="item.picture" />
        <div
          style="
            width: 100%;
            text-align: center;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          "
        >
          {{ item.name }}
        </div>
        <div
          style="
            width: 100%;
            text-align: center;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          "
        >
          {{ item.desc }}
        </div>
        <div
          style="
            color: red;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          "
        >
          ￥{{ item.price }}
        </div>
      </div>
    </div>
  </div>
</template>


<style>
.hotItem {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.hotItem:hover {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px) scale(1.02);
}
</style>